<template>
	<view class="content">
		<!-- 头部安全距离 -->
		<view class="status_bar" style="height: 44px"></view>
		<view class="under_box">
			<view class="status_bar"></view>
			<!-- 左侧展示数据 -->
			<view class="left_nav">
				<view :class="{active: showType === 'home'}" @click="goDaoHome('home')" class="home_icon">
					<u-icon name="home" color="#fe7c24" size="24"></u-icon>
				</view>
				<view class="division">
					我的DAO
				</view>
				<view class="dao_logo_list" v-for="(item,index) in myDaoList" :key="index"
					@click="getDaoInfo(item.serialNo,index)">
					<image :src="item.logo" mode="" class="avatar" :class="{active:currentIndex === index}"></image>
					<view class="dao_logo_name">{{item.daoName}}</view>
				</view>
			</view>
			<!-- 右侧展示内容 -->
			<view class="right_content">
				<!-- 默认展示||首页内容 -->
				<view class="default_dao_content" v-if="showType == 'home'">
					<view class="top_tips">
						<view style="fontSize: 24px;">DaoBook</view>
						<view>重塑生产关系 释放生产力</view>
					</view>
					<!-- 加入搜索按钮 -->
					<view class="under_btn">
						<view class="btn" @click="goCreateDao()">
							<u-icon name="plus-circle" size="28"></u-icon>
							<view class="">创建DAO组织</view>
							<u-icon name="arrow-right" size="28"></u-icon>
						</view>
						<view class="btn" @click="goSearchDao()">
							<u-icon name="search" size="28"></u-icon>
							<view class="">搜索DAO组织</view>
							<u-icon name="arrow-right" size="28"></u-icon>
						</view>
					</view>
				</view>
				<view class="list_dao_content" v-if="showType == 'list'">
					<scroll-view scroll-y="true" class="scroll-Y">
						<view class="top_box_info">
							<image :src="currentDaoInfo.logo" mode="" class="avatar"></image>
							<view class="top_box_info_title">{{currentDaoInfo.daoCode}}</view>
							<view style="margin-right: 10px;">
								<u-icon name="scan" size="32" color="#fff" @click="startScan"></u-icon>
							</view>
							<u-icon name="more-dot-fill" color="#fff" size="32" @click="moreMenu"></u-icon>
						</view>
						<!-- 吸顶分段器 -->
						<u-sticky bgColor="#fff">
							<u-tabs :list="tablist" :current="tabIndexShow" @click="changeTab"
								:inactiveStyle="{color: '#999'}" :activeStyle="{color: 'var(--echo-main-color)'}"
								lineColor="var(--echo-main-color)" :scrollable="false"></u-tabs>
						</u-sticky>
						<!-- dao主要内容 -->
						<view class="list_dao_main" v-show="tabIndexShow == 0">
							<!-- dao 信息 -->
							<view class="dao_tips">
								{{currentDaoInfo.profile}}
							</view>
							<!-- 我的资产 -->
							<view class="dao_describe_bg dao_app">
								<view class="dao_app_info" v-for="(item,index) in daoAppList" :key="index"
									@click="gotoApp(item.type,tenantId,item.url+'?tenantId='+ tenantId)">
									<image :src="item.src" mode="" class="app_logo"></image>
									<view class="dao_app_name">{{item.name}}</view>
								</view>
							</view>
							<!-- 公告 -->
							<view class="dao_module">
								<view class="module_title">公告</view>
								<view class="module_time">更新于08-23 24:00</view>
							</view>
							<view class="dao_describe_bg">
								s11eDAO：web3实体品牌孵化器，敬请期待
							</view>
							<!-- 合约地址 -->
							<view class="dao_module">
								<view class="module_title">DAO 合约</view>
								<view class="module_time" @click="copyContract">
									<image style="width: 20px;height: 20px;" src="../../static/images/my/copy.png">
									</image>
								</view>
							</view>
							<view class="dao_describe_bg dao_contract">
								cfxtest:achrvxc7x4fm8dzujm07rebr3hra7ps5ce3y2zmhr9
							</view>
							<!-- 成员 -->
							<view class="dao_module">
								<view class="module_title">成员</view>
								<view class="module_btn">{{daoMemberList.length}}人</view>
								<u-icon name="arrow-right" color="#fe7c24" size="18"></u-icon>
							</view>
							<view class="dao_member dao_describe_bg">
								<view class="dao_member_info" v-for="(item,index) in daoMemberList" :key="index">
									<image :src="item.avatar || defaultAvatar" mode="" class="avatar"
										@click="goToMemberProfile(item.customerNo)"></image>
									<view class="nickname">{{item.nickname}}</view>
								</view>
							</view>
							<!-- 动态 -->
							<view class="dao_module">
								<view class="module_title">文档链接</view>
							</view>
							<view class="dao_describe_bg dao_dynamic" v-for="(item,index) in LinkDocList" :key="index">
								<image :src="item.iconImg || defaultLogo" mode="" class="link-img"></image>
								<view class="dynamic_info" @click="goToReadFile(item.linkUrl)">
									{{item.title}}
								</view>
							</view>
						</view>
						<view style="padding: 0 20rpx;" v-show="tabIndexShow != 0">
							<z-paging ref="paging" v-model="taskList" @query="queryList" :use-page-scroll="true"
								:fixed="false">
								<view v-show="tabIndexShow != 2" class="task" v-for="(item, index) in taskList" :key="index"
									@click="goToTaskDetail(tabIndexShow, item.serialNo)">
									<view class="top_conent">
										<view class="title">
											{{item.taskName || item.name}}
										</view>
										<view class="description">
											{{item.description}}
										</view>
									</view>
									<view class="bottom_data">
										起止时间: {{item.startTime}}-{{item.endTime}}
										奖金<text
											style="color: var(--echo-main-color);margin: 0 2rpx;">{{item.incentiveAmount}}</text>原力
									</view>
								</view>
								<view v-show="tabIndexShow == 2" style="display: flex; justify-content: space-between;flex-wrap: wrap;" >
									<BsinNftCard v-show="tabIndexShow == 2" nftNameColor="#333" background="rgb(241, 241, 241)" v-for="(item, index) in taskList"
										:key="index" :item="item"  imgStyle="width: 130px; height:130px;margin-top: 10px;" @toDetail="toDetail(item.serialNo)">
									</BsinNftCard>
								</view>
							</z-paging>
							<!-- 提案 -->
							<BsinFab @publish="doPublish('task')" v-show="tabIndexShow == 1">
							</BsinFab>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<u-popup :show="startMenuShow" @close="startMenuShow = false" round="20">
			<view class="popup-bx">
				<!-- 顶部信息 -->
				<view class="popup-bx-top">
					<image :src="currentDaoInfo.logo" mode="" class="avatar-big"></image>
					<view class="popup-info">
						<view class="popup-info-title">{{currentDaoInfo.daoCode}}</view>
						<view class="popup-info-content">重塑生产力 释放生产关系</view>
					</view>
				</view>
				<!-- 中间信息 -->
				<view class="popup-bx-middle"></view>
				<!-- 底部按钮 -->
				<view class="popup-bx-btn" @click="rageQuitDao">
					怒退Dao
				</view>
			</view>
		</u-popup>
		<u-modal :show="confirmExitShow" content='是否退出当前Dao' showCancelButton @cancel="confirmExitShow=false"
			@confirm="confirmExit" confirmColor="#fe7c24">
		</u-modal>
	</view>
</template>

<script>
	import {
		getDaoTaskPageList
	} from '@/config/task.js';
	import {
		getDaoProposalPageList
	} from '@/config/proposal.js';
	import {
		getElectionPageList
	} from '@/config/election.js';
	import {
		getLinkDocPageList
	} from '@/config/linkDoc.js';
	import {
		getMyDaos
	} from '@/config/customer.js';
	import {
		getDaoDetail,
		getDaoNftGoodsPageList,
		getDaoMemberPageList,
		rageQuitDao
	} from '@/config/dao.js';
	export default {
		data() {
			return {
				token: "",
				defaultAvatar: '../../static/images/pfp.png',
				defaultLogo: '../../static/images/logo.png',
				tenantId: "", //当前选中的dao
				customerInfo: "",
				showResult: false,
				currentDaoInfo: {},
				// 控制变大样式
				currentIndex: 0,
				// 控制home list不同组件的展示 
				showType: 'home',
				// 弹出层
				startMenuShow: false,
				// 确认退出
				confirmExitShow: false,
				// 分段器数据
				tablist: [{
						name: 'DAO',
					}, {
						name: '任务',
					},
					{
						name: '徽章',
					}/* ,
					{
						name: '选举',
					},
					{
						name: '投票',
					} */
				],
				tabIndexShow: 0, // 分段器展示
				daoAppList: [{
						src: "../../static/images/dao/fa.png",
						name: '贡献榜',
						url: "",
						type: 'url'
					},
					{
						src: "../../static/images/dao/qian.png",
						name: '资产',
						url: "",
						type: 'minApp'
					},
					{
						src: "../../static/images/dao/jiang.png",
						name: '公会',
						url: "",
						type: 'url'
					},
					{
						src: "../../static/images/dao/piao.png",
						name: '核销',
						url: "",
						type: 'url'
					},
					/* {
						src: "../../static/images/dao/piao.png",
						name: '论坛',
						code: 's11e-forum',
						url: "/pages/Dao/DaoForum",
						type: 'url'
					} */
				],
				myDaoList: [],
				// dao成员
				daoMemberList: [],
				// 文档外链列表
				LinkDocList: [],
				// 0任务 1选举 2提案 3投票 
				taskList: []
			}
		},

		onShow() {
			this.token = uni.getStorageSync('token');
			this.customerInfo = uni.getStorageSync('customerInfo');
		},

		// 点击tab触发
		onTabItemTap() {
			if (!this.token) {
				this.showType = "home"
				this.myDaoList = []
				return
			}
			this.queryMydao()
		},
		onLoad() {
			if (!this.token) {
				return
			}
			// 首先查询用户加入的dao，根据dao查询相关信息，如果客户信息不存在则不执行
			getMyDaos({}).then(res => {
				this.myDaoList = res.data
			})
		},

		methods: {
			// nft详情
			toDetail(serialNo) {
				uni.navigateTo({
					url: "/pagesDao/NftDetail?serialNo=" + serialNo
				})
			},
			// 查询我加入的dao列表
			queryMydao() {
				getMyDaos({}).then(res => {
					this.myDaoList = res.data
					if (this.myDaoList.length <= 0) {
						this.showType = "home"
						return
					}

					// 默认选择第一个展示信息
					this.getDaoInfo(this.myDaoList[0]?.serialNo, 0)
				})
			},

			// daotab功能切换
			changeTab({
				index
			}) {
				this.tabIndexShow = index
				this.$refs.paging.reload()
			},

			// 退出dao
			rageQuitDao() {
				this.startMenuShow = false
				this.confirmExitShow = true
			},

			// 确认退出
			confirmExit() {
				this.confirmExitShow = false
				rageQuitDao({
					customerNo: this.customerInfo?.customerNo,
					tenantId: this.tenantId
				}).then(res => {
					uni.$u.toast('退出成功')
					// 重新查询更新数据
					this.queryMydao()
				}).catch(err => {
					uni.$u.toast('退出是失败')
				})
			},

			// 列表查询
			queryList(pageNo, pageSize) {
				// 查询任务列表
				if (this.tabIndexShow == 1) {
					getDaoTaskPageList({
						pageNo,
						pageSize,
						status: 1,
						tenantId: this.tenantId
					}).then(res => {
						this.$refs.paging.complete(res.data);
					})
				} else if (this.tabIndexShow == 2) {
					// 查询提案列表
					getDaoNftGoodsPageList({
						pageNo,
						pageSize,
						tenantId: this.tenantId
					}).then(res => {
						this.$refs.paging.complete(res.data);
					})
				} else if (this.tabIndexShow == 3) {
					// 查询选举列表
					getElectionPageList({
						pageNo,
						pageSize,
						tenantId: this.tenantId
					}).then(res => {
						this.$refs.paging.complete(res.data);
					})
				} else if (this.tabIndexShow == 4) {
					// TODO 查询投票列表
					getElectionPageList({
						pageNo,
						pageSize,
						tenantId: this.tenantId
					}).then(res => {
						this.$refs.paging.complete(res.data);
					})
				}
			},

			// 扫码
			startScan() {
				this.showResult = false;
				var _self = this;
				uni.scanCode({
					success: function(res) {
						_self.codeType = res.scanType;
						_self.codeValue = res.result;
						_self.showResult = true;
						// TODO 根据扫描结果处理
						uni.navigateTo({
							url: `/pages/Common/H5page?url=${encodeURIComponent(res.result)}`
						})

					}
				});
			},

			// 更多功能
			moreMenu() {
				this.startMenuShow = true
			},

			// 复制剪切板
			copyContract() {
				uni.setClipboardData({
					data: "合约地址",
					success: function() {
						console.log('success');
					},
				});
			},

			goToMiniProgram(tenantId) {
				// 通知宿主
				let data = {
					tenantId: tenantId,
					version: '1.0.0',
					url: 'http://www.huoyuanshequ.com/__UNI__C81108F.wgt',
					uniappID: '__UNI__C81108F'
				}
				uni.sendNativeEvent("DownloadAndOpen", data)
			},

			getDaoInfo(serialNo, index) {
				this.tabIndexShow = 0
				// 标明当前点击
				this.currentIndex = index
				// 切换类型
				this.showType = 'list'
				// 查询dao的详细信息
				getDaoDetail({
					serialNo
				}).then(res => {
					this.currentDaoInfo = res.data
					this.daoMemberList = res.data?.daoMermbers
					this.LinkDocList = res.data?.daoLinkDocs
					this.tenantId = res.data.tenantId
				})
			},

			goDaoHome(type) {
				this.currentIndex = null
				// 切换类型
				this.showType = type
				// 重置dao的选项
				this.tabIndexShow = 0
			},

			gotoApp(type, tenantId, url) {
				if (type == "minApp") {
					goToMiniProgram(tenantId)
				} else {
					uni.navigateTo({
						url: url
					})
				}
			},

			/**
			 * 任务详情
			 * @param {Object} taskType
			 * 0 任务
			 * 1 选举
			 * 2 提案
			 * 3 投票
			 */
			goToTaskDetail(type, serialNo) {
				console.log(type)
				uni.navigateTo({
					url: `/pagesDao/TaskDetail?type=${type}&serialNo=${serialNo}`
				})
			},

			goToMemberProfile(customerNo) {
				uni.navigateTo({
					url: `/pagesMy/MySpace?customerNo=${customerNo}`
				})
			},

			// 阅读文档
			goToReadFile(url) {
				uni.navigateTo({
					url: `/pages/Common/H5page?url=${encodeURIComponent(url)}`
				})
			},

			// 发布任务
			doPublish(taskType) {
				switch (taskType) {
					case 'task':
						uni.navigateTo({
							url: '/pagesDao/CreateTask'
						})
						break;
					case 'proposal':
						uni.navigateTo({
							url: '/pages/Dao/CreateProposal'
						})
						break;
				}
			},

			// 创建dao
			goCreateDao() {
				uni.navigateTo({
					url: "/pagesDao/CreateDao"
				})
			},

			// 搜索dao
			goSearchDao() {
				uni.switchTab({
					url: '/pages/Home/Home'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	
	.content {

		// 顶部安全距离
		.status_bar {
			height: var(--status-bar-height);
		}
		
		// 底部
		.under_box {
			display: flex;
			position: absolute;
			height: calc(100% - var(--status-bar-height));
			width: 100%;

			.app_logo {
				border-radius: 50%;
				width: 60rpx;
				height: 60rpx;
				overflow: hidden;
			}

			// 公共头像样式
			.avatar {
				border-radius: 50%;
				width: 90rpx;
				height: 90rpx;
				border: 1px solid #ddd;
				overflow: hidden;
			}

			.link-img {
				border-radius: 50%;
				width: 60rpx;
				height: 60rpx;
				border: 1px solid #ddd;
				overflow: hidden;
			}

			// 点击变化的
			.active {
				border-radius: 50%;
				width: 110rpx !important;
				height: 110rpx !important;
				border: 1px solid #ddd;
			}

			// 左侧布局
			.left_nav {
				background-color: #F6F6F6;
				width: 20%;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-top: 20rpx;

				.home_icon {
					display: flex;
					justify-content: center;
					align-items: center;
					overflow: hidden;
					border-radius: 50%;
					width: 100rpx;
					height: 100rpx;
					border: 1px solid #ddd;
				}

				.division {
					color: #fe7c24;
					font-weight: bold;
					padding: 20rpx 0;
					margin: 20rpx 0 30rpx;
					width: 82%;
					border-top: 1px solid #ddd;
					text-align: center;
				}

				.dao_logo_list {
					display: flex;
					flex-direction: column;
					align-items: center;

					// daologo名字
					.dao_logo_name {
						width: 120rpx;
						text-align: center;
						padding: 20rpx 0rpx;
						/*1.强制不换行*/
						white-space: nowrap;
						/*2.溢出隐藏*/
						overflow: hidden;
						/*3.超出部分用省略号表示*/
						text-overflow: ellipsis;
					}
				}
			}

			// 右侧布局
			.right_content {
				width: 80%;
				background-color: #fff;

				// 默认展示的dao组织
				.default_dao_content {

					// 提示文字内容
					.top_tips {
						text-align: center;
						padding: 80rpx;
						color: #fff;
						font-weight: 900;
						border-radius: 10px 0 0;
						margin-bottom: 40rpx;
						background-color: #484646;
					}

					// btn操作
					.under_btn {

						.btn {
							margin: 0 auto;
							width: 400rpx;
							padding: 30rpx;
							border-radius: 60rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-size: $echo-font-size-title;
							font-weight: 700;
							background: #F7F7F7;
							margin-bottom: 40rpx;
						}
					}
				}

				// list显示的dao
				.list_dao_content {
					height: 100%;

					.scroll-Y {
						height: 100%;
					}

					// dao主要内容
					.list_dao_main {
						margin: 0 20rpx;
						padding-bottom: 20rpx;

						.dao_tips {
							color: #999;
							line-height: 40rpx;
							margin: 20rpx 0;
						}

						.dao_app {
							display: flex;
							flex-wrap: wrap;
							text-align: center;
							align-items: center;

							.dao_app_info {
								width: 25%;
								height: 102rpx;

								.dao_app_name {
									margin-top: -6rpx;
								}
							}
						}

						.dao_contract {
							/*1.强制不换行*/
							white-space: nowrap;
							/*2.溢出隐藏*/
							overflow: hidden;
							/*3.超出部分用省略号表示*/
							text-overflow: ellipsis;
						}

						// 成员
						.dao_member {
							display: flex;
							flex-wrap: wrap;
							text-align: center;
							align-items: center;

							.dao_member_info {
								width: 25%;
								padding-bottom: 20rpx;
							}

							.nickname {
								padding: 0 10rpx;
								width: 100rpx;
								/*1.强制不换行*/
								white-space: nowrap;
								/*2.溢出隐藏*/
								overflow: hidden;
								/*3.超出部分用省略号表示*/
								text-overflow: ellipsis;
							}
						}

						// 动态
						.dao_dynamic {
							display: flex;
							justify-content: space-between;
							align-items: center;

							.dynamic_info {
								flex: 1;
								margin-left: 16rpx;
								color: $echo-main-color;
							}
						}
					}

					// 任务
					.task {
						padding: 30rpx 0;
						border-bottom: 2rpx solid #f0eeee;

						// 上部分内容
						.top_conent {

							// 文章标题
							.title {
								margin-bottom: 20rpx;
							}

							// 文章描述
							.description {
								min-height: 34rpx;
								color: #777;
							}
						}

						// 下部分时间
						.bottom_data {
							margin-top: 20rpx;
							color: #777;
						}
					}

					// 提案
					.proposal {}

					// 投票
					.vote {}
				}
			}
		}

		// 公共

		// dao描述
		.dao_describe_bg {
			background: #F7F7F7;
			padding: 20rpx 10rpx;
			color: #999;
			margin: 20rpx 0;
			border-radius: 4rpx;
		}

		// dao模块
		.dao_module {
			display: flex;
			justify-content: space-between;
			align-items: center;

			// 模块标题大小
			.module_title {
				font-weight: 700;
				font-size: $echo-font-size-title;
				flex: 1;
			}

			// 按钮颜色
			.module_btn {
				background: #F7F7F7;
				padding: 6rpx 20rpx;
				border-radius: 40rpx;
				margin-right: 10rpx;
			}

			// 时间
			.module_time {
				color: #999;
			}
		}

		.top_box_info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-image: url("https://ipfs.s11edao.com/ipfs/QmbfasiDwENMkvuVZSXw4uT4ge7XKUsRxxu1xcKcfP4o4i");
			// 添加滤镜效果
			filter: brightness(0.8);
			background-repeat: no-repeat;
			background-size: cover;
			padding: 0 20rpx;
			border-radius: 10px 0 0;
			color: #fff;
			height: 260rpx;
			font-size: 40rpx;
			font-weight: 900;

			&_title {
				flex: 1;
				margin-left: 20rpx;
			}
		}

		.popup-bx {
			background-color: #F9F9F9;
			overflow: hidden;

			.avatar-big {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				overflow: hidden;
			}

			// 顶部
			.popup-bx-top {
				padding: 40rpx;
				display: flex;
				align-items: center;
				background-color: #fff;
				justify-content: space-around;

				.popup-info {
					margin-left: 10rpx;
					flex: 1;

					&-title {
						font-size: 50rpx;
						font-weight: 700;
					}

					&-content {
						color: #b8b8b8;
					}
				}
			}

			// 顶部按钮
			.popup-bx-btn {
				background-color: #fff;
				text-align: center;
				padding: 40rpx 0;
				color: $echo-main-color;
				margin-top: 40rpx;
			}
		}

	}
</style>
